<template>
    <el-config-provider :locale="locale">
        <NuxtLayout>
            <NuxtLoadingIndicator />
            <NuxtPage />
        </NuxtLayout>
    </el-config-provider>
</template>

<script lang="ts" setup>
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import en from "element-plus/dist/locale/en.mjs";
import { getPageTitle } from "@/utils/common";
import useConfigStore from "@/stores/config";
import { getUrl } from "@/utils/common";
import Language from "@/utils/language";

const configStore = useConfigStore();

let systemLang = "zh-cn";
const locale = computed(() => (systemLang == "zh-cn" ? zhCn : en));

const language = new Language(useNuxtApp().$i18n);
language.setLocale(systemLang);

const sysConfig = configStore.sysConfig?.base;

const route = useRoute();

// 监听路由
watch(
    route,
    (nval, oval) => {
        // 语言包异步加载，需要延时处理
        setTimeout(() => {
            // 设置标题、描述、关键字和favicon
            useHead({
                title: language.t(getPageTitle(route)),
                meta: [
                    { charset: "utf-8" },
                    {
                        name: "viewport",
                        content:
                            "width=device-width, initial-scale=1, user-scalable=0",
                    },
                    { name: "description", content: sysConfig?.seo_desc },
                    { name: "keywords", content: sysConfig?.seo_keyword },
                ],
                link: [
                    {
                        rel: "icon",
                        type: "image/x-icon",
                        href: sysConfig?.pc_favicon ? getUrl(sysConfig.pc_favicon) : 'favicon.ico',
                    },
                ],
            });
        }, !oval ? 500 : 0)
    },
    { immediate: true }
);
</script>
